import React, { Component } from 'react';
import { Scene, GaodeMap } from '@antv/l7';
import { ChoroplethLayer } from '@antv/l7-composite-layers';

class ChinaCitys extends Component {
  public scene: Scene | undefined;
  public choroplethLayer: ChoroplethLayer | undefined;

  constructor(props) {
    super(props);
  }

  async initMap() {
    this.scene = new Scene({
      id: 'container',
      map: new GaodeMap({
        pitch: 0,
        style: 'dark',
        zoom: 3,
        center: [120.19660949707033, 30.234747338474293],
      }),
    });

    fetch(
      'https://mdn.alipayobjects.com/afts/file/A*363rRoqmEu0AAAAAAAAAAAAADrd2AQ/12.20 各城市首轮感染高峰期预测.json'
    )
      .then((response) => response.json())
      .then((data) => {
        this.choroplethLayer = new ChoroplethLayer({
          visible: true,
          autoFit: true,
          source: {
            data: data,
            parser: {
              type: 'json',
              geometry: 'geometry',
            },
          },
          fillColor: {
            field: 'name',
            value: ['#fee5d9', '#fcae91', '#fb6a4a', '#de2d26', '#a50f15'],
          },
          opacity: 0.8,
          strokeColor: '#ccc',
          lineType: 'solid',
          lineWidth: 0.6,
          lineOpacity: 1,
          label: {
            field: 'name',
            visible: true,
            position: {
              coordinates: 'centroid',
            },
            style: {
              fill: '#000',
              opacity: 0.8,
              fontSize: 10,
              stroke: '#fff',
              strokeWidth: 2,
              textAllowOverlap: false,
              padding: [5, 5],
            },
          },
          state: {
            active: {
              strokeColor: 'blue',
            },
            select: {
              strokeColor: 'yellow',
              lineWidth: 1,
              lineOpacity: 0.8,
            },
          },
          enabledMultiSelect: true,
        });

        this.scene && this.choroplethLayer.addTo(this.scene);
      });
  }

  componentDidMount() {
    this.initMap();
  }

  componentWillUnmount() {
    this.scene && this.scene.destroy();
  }

  update = () => {
    if (this.scene) {
      this.choroplethLayer?.update({
        strokeColor: 'blue',
        source: {
          data: [
            {
              城市名称: '北京',
              达峰进度条: 100,
              结束进度条: 2,
              第一波疫情达峰日期: '2022年12月18日',
              第一波疫情结束日期: '2023年1月24日',
              累计感染占总人口比值: 0.442,
              adcode: 110100,
              level: 'city',
              name: '北京市',
              parent: { adcode: 110000 },
              center: [116.405285, 39.904989],
              centroid: [116.405285, 39.904989],
              geometry: {
                type: 'Polygon',
                coordinates: [
                  [
                    [116.812384, 39.615914],
                    [116.838441, 39.622224],
                    [116.826894, 39.638212],
                    [116.849946, 39.667552],
                    [116.906656, 39.677423],
                    [116.90595, 39.687917],
                    [116.88279, 39.718477],
                    [116.916676, 39.731354],
                    [116.901818, 39.763622],
                    [116.952307, 39.790301],
                    [116.929788, 39.811372],
                    [116.925895, 39.835402],
                    [116.866052, 39.843896],
                    [116.827278, 39.877066],
                    [116.7847, 39.891422],
                    [116.780583, 39.949721],
                    [116.759608, 39.969927],
                    [116.775366, 39.992756],
                    [116.781539, 40.034819],
                    [116.819994, 40.028349],
                    [116.822743, 40.04647],
                    [116.857809, 40.051893],
                    [116.867828, 40.041868],
                    [116.928106, 40.054929],
                    [116.96051, 40.051104],
                    [116.972105, 40.036978],
                    [117.028515, 40.03396],
                    [117.052025, 40.05938],
                    [117.085611, 40.075126],
                    [117.139223, 40.064051],
                    [117.158476, 40.077442],
                    [117.205239, 40.070287],
                    [117.209782, 40.082243],
                    [117.211258, 40.0966],
                    [117.249263, 40.11648],
                    [117.297101, 40.11885],
                    [117.307614, 40.136975],
                    [117.35635, 40.14091],
                    [117.351115, 40.171664],
                    [117.393188, 40.174902],
                    [117.37844, 40.210297],
                    [117.390023, 40.227967],
                    [117.35161, 40.229451],
                    [117.334, 40.285653],
                    [117.295226, 40.278502],
                    [117.242284, 40.369977],
                    [117.226191, 40.369043],
                    [117.240717, 40.394526],
                    [117.23408, 40.417154],
                    [117.26334, 40.442373],
                    [117.208572, 40.501097],
                    [117.215023, 40.513276],
                    [117.264184, 40.516791],
                    [117.249546, 40.548187],
                    [117.343153, 40.581737],
                    [117.389294, 40.561251],
                    [117.429983, 40.576129],
                    [117.412738, 40.605125],
                    [117.448884, 40.628375],
                    [117.462007, 40.653074],
                    [117.477988, 40.635336],
                    [117.500431, 40.636206],
                    [117.51459, 40.66052],
                    [117.482596, 40.67896],
                    [117.465187, 40.673536],
                    [117.409234, 40.687289],
                    [117.342418, 40.673434],
                    [117.321166, 40.658288],
                    [117.278606, 40.664469],
                    [117.261402, 40.681151],
                    [117.241249, 40.676807],
                    [117.202369, 40.695581],
                    [117.117788, 40.700079],
                    [117.110653, 40.708239],
                    [117.031053, 40.692138],
                    [116.965083, 40.709766],
                    [116.926552, 40.744889],
                    [116.923391, 40.773727],
                    [116.895022, 40.781726],
                    [116.896691, 40.796434],
                    [116.84819, 40.839315],
                    [116.813621, 40.848422],
                    [116.759497, 40.889861],
                    [116.713333, 40.913224],
                    [116.677916, 40.970972],
                    [116.698858, 41.021253],
                    [116.688625, 41.044653],
                    [116.630858, 41.060798],
                    [116.614123, 41.036098],
                    [116.622889, 41.0207],
                    [116.614516, 40.983306],
                    [116.597772, 40.974755],
                    [116.569167, 40.991637],
                    [116.516787, 40.975294],
                    [116.455528, 40.980477],
                    [116.447454, 40.953837],
                    [116.473599, 40.919737],
                    [116.473942, 40.896006],
                    [116.398793, 40.90595],
                    [116.365075, 40.943234],
                    [116.334119, 40.920828],
                    [116.334438, 40.90463],
                    [116.399306, 40.850492],
                    [116.406458, 40.833353],
                    [116.436823, 40.82073],
                    [116.465844, 40.774521],
                    [116.416491, 40.769374],
                    [116.313175, 40.770198],
                    [116.307936, 40.75212],
                    [116.273448, 40.762889],
                    [116.24794, 40.791826],
                    [116.22035, 40.744676],
                    [116.204707, 40.739938],
                    [116.171339, 40.695986],
                    [116.162678, 40.662442],
                    [116.136934, 40.667649],
                    [116.112584, 40.648511],
                    [116.122076, 40.629996],
                    [116.098874, 40.630579],
                    [116.004992, 40.583915],
                    [115.982154, 40.579006],
                    [115.971988, 40.602364],
                    [115.907801, 40.617298],
                    [115.885401, 40.595229],
                    [115.827372, 40.58703],
                    [115.819803, 40.559346],
                    [115.792208, 40.561299],
                    [115.755054, 40.540038],
                    [115.736045, 40.503992],
                    [115.782209, 40.492069],
                    [115.770422, 40.444161],
                    [115.796443, 40.426829],
                    [115.859801, 40.362122],
                    [115.91831, 40.353893],
                    [115.922674, 40.325892],
                    [115.968887, 40.26427],
                    [115.930073, 40.254523],
                    [115.898486, 40.234502],
                    [115.870315, 40.186078],
                    [115.844427, 40.168023],
                    [115.851911, 40.148043],
                    [115.806563, 40.153259],
                    [115.773029, 40.176191],
                    [115.734117, 40.129375],
                    [115.715896, 40.133382],
                    [115.644586, 40.126638],
                    [115.643715, 40.117504],
                    [115.599114, 40.120016],
                    [115.590706, 40.096393],
                    [115.527328, 40.076066],
                    [115.478549, 40.036167],
                    [115.454527, 40.029704],
                    [115.449198, 40.001987],
                    [115.428521, 39.984335],
                    [115.426773, 39.950082],
                    [115.480689, 39.935844],
                    [115.523007, 39.898921],
                    [115.509025, 39.88417],
                    [115.529196, 39.875951],
                    [115.5145, 39.838352],
                    [115.569193, 39.814196],
                    [115.552213, 39.794703],
                    [115.505294, 39.784591],
                    [115.483239, 39.798681],
                    [115.425215, 39.773357],
                    [115.439167, 39.752681],
                    [115.488877, 39.733167],
                    [115.499783, 39.691275],
                    [115.478618, 39.651182],
                    [115.522446, 39.639966],
                    [115.518308, 39.597152],
                    [115.545977, 39.618758],
                    [115.587042, 39.589961],
                    [115.618439, 39.604064],
                    [115.657275, 39.600081],
                    [115.667479, 39.615259],
                    [115.697911, 39.579253],
                    [115.692076, 39.565786],
                    [115.738551, 39.546282],
                    [115.752507, 39.51545],
                    [115.829483, 39.512879],
                    [115.819228, 39.530759],
                    [115.85549, 39.554988],
                    [115.882962, 39.548116],
                    [115.907857, 39.566876],
                    [115.923751, 39.597287],
                    [115.957546, 39.560919],
                    [116.014048, 39.588076],
                    [116.039546, 39.571962],
                    [116.09907, 39.575173],
                    [116.130375, 39.567745],
                    [116.151794, 39.583408],
                    [116.196863, 39.588983],
                    [116.246182, 39.557164],
                    [116.244694, 39.517344],
                    [116.257938, 39.500524],
                    [116.306448, 39.488966],
                    [116.320056, 39.468542],
                    [116.350167, 39.452905],
                    [116.434393, 39.442758],
                    [116.454685, 39.45331],
                    [116.448763, 39.476287],
                    [116.412366, 39.482071],
                    [116.418733, 39.506391],
                    [116.402662, 39.526885],
                    [116.443829, 39.509883],
                    [116.44099, 39.52731],
                    [116.478882, 39.53922],
                    [116.470942, 39.554601],
                    [116.508453, 39.551056],
                    [116.524445, 39.596543],
                    [116.5666, 39.604363],
                    [116.565926, 39.61978],
                    [116.60779, 39.619699],
                    [116.620516, 39.601671],
                    [116.662391, 39.60521],
                    [116.705101, 39.587976],
                    [116.727059, 39.59305],
                    [116.702571, 39.610425],
                    [116.74868, 39.619938],
                    [116.79071, 39.596041],
                    [116.812384, 39.615914],
                  ],
                ],
              },
            },
          ],
        },
        label: {
          position: false,
        },
      });
    }
  };

  render() {
    return (
      <div
        id="container"
        style={{
          position: 'absolute',
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
        }}
      >
        <div style={{ position: 'absolute', left: '10px', zIndex: 1 }}>
          <button type="button" onClick={this.update} style={{ marginTop: 8 }}>
            update
          </button>
        </div>
      </div>
    );
  }
}

export default ChinaCitys;
